<template>
  <div class="cvContainer">
    <main>
      <section class="info">
        <h3>黄俊彦</h3>
        <div>
          <span>男</span>
          <span>33岁</span>
          <span>前端开发工程师</span>
          <span>上海</span>
        </div>
        <div>
          <span>手机：15921363438</span>
          <span>邮箱：15921363438@163.com</span>
        </div>
      </section>
      <section class="workExp">
        <h2>工作经历</h2>
        <div class="gap_div"></div>
        <div class="workItem">
          <h3>
            <span class="company">北极鸥</span>
            <span>前端开发</span>
            <span>2024.12-2025.06</span>
          </h3>
          <div><b>职责：</b>前端开发</div>
          <h3><b>主要成就和任务</b></h3>
          <ul>
            <li>负责招聘软件web端开发，性能优化。</li>
            <li>企业端：用户注册，商城支付，面试预约，员工管理。</li>
            <li>个人端：招聘首页, 职位详情，公司详情。</li>
            <li>和设计师沟通完善页面交互体验和细节，推动项目的不断完善。</li>
          </ul>
        </div>
        <div class="workItem">
          <h3>
            <span class="company">上海亚派有限公司</span>
            <span>前端负责人</span>
            <span>2021.03 - 2024.3</span>
          </h3>
          <div><b>职责：</b>对接需求，技术方案设计；项目进度管理；代码审核；前端开发</div>
          <h3><b>负责事项</b></h3>
          <ul>
            <li>与用户体验设计（UED）团队紧密合作，通过积极的沟通和技术洞察力，共同规划和优化前端组件。</li>
            <li>密切关注测试阶段反馈的问题，积极解决这些问题，保证项目上线交付；</li>
            <li>负责前端结构设计与布局，编写可复用的用户界面组件；</li>
            <li>负责前端页面开发，优化前端页面性能，解决浏览器兼容性问题；</li>
            <li>与后端开发工程师积极合作，完成前端与后端的数据交互；</li>
          </ul>
        </div>
      </section>
      <section class="projectSec">
        <h2>项目经历</h2>
        <div class="gap_div"></div>
        <div class="projectItem">
          <h3>
            <span class="projectName">DHR人力资源管理平台</span>
            <div></div>
          </h3>
          <div class="skills">
            <span class="prefWord"></span>
            <span>技术栈：</span>
            <span class="tag">Vue2</span>
            <span class="tag">Element</span>
            <span class="tag">Axios</span>
            <span class="tag">ECharts</span>
            <span class="tag">Vxe-Table</span>
          </div>
          <!-- <h4>项目概述</h4> -->
          <p>项目概述：以低代码为驱动的人事信息管理平台，兼具后台管理，门户展示。</p>
          <h3><b>项目介绍</b></h3>
          <ul>
            <li>负责用户自助，经理自助页面组件化开发，保证组件的复用性。</li>
            <li>使用<i> AntV X6 </i>图编辑引擎开发流程配置模块，丰富和满足用户在流程节点中的各类业务需求。</li>
            <li>负责薪资帐套、考勤公式等复杂校验和交互要求的系统模块开发和设计。</li>
            <li>负责<i> 低代码 </i>平台开发，帮助管理系统数据展示落地，对现有组件进行重构同时推进基础组件开发；</li>
            <li>在团队中积极沟通和合作，负责项目的需求分析、设计和开发，并对项目进展情况进行有效的跟踪和反馈。</li>
          </ul>
        </div>

        <div class="projectItem">
          <h3>
            <span class="projectName">光伏资产管理平台</span>
            <div></div>
          </h3>
          <div class="skills">
            <span class="prefWord"></span>
            <span>技术栈：</span>
            <span class="tag">Vue3</span>
            <span class="tag">Element</span>
            <span class="tag">Axios</span>
            <span class="tag">ECharts</span>
            <span class="tag">Vxe-Table</span>
            <span class="tag">uni-app</span>
            <span class="tag">wot-design-uni</span>
          </div>
          <p>项目概述：兼具大屏展示以及资产管理的平台软件。</p>
          <h3><b>项目介绍</b></h3>
          <ul>
            <li>具备根据光伏资产多维数据的价值评估功能，帮助业主计算资产价值。</li>
            <li>完善的文档管理，流程审批，交易中心，光伏运维管理模块。</li>
            <li>移动端使用<i> uni-app </i>开发微信小程序，师傅版可以帮助维修师傅接单，上报维修进度。用户版兼具PC端部分功能，同时可以发布维修任务。</li>
            <li>IM模块方便业主和意向买家沟通，推动交易。</li>
          </ul>
        </div>

        <div class="projectItem">
          <h3>
            <span class="projectName">低代码编辑全栈项目(个人开源)</span>
            <div>
              <a href="https://gitee.com/youknowhrt/jedi-admin-react">前端源码</a>
              <a href="https://gitee.com/youknowhrt/jedi-admin-nest">后端源码</a>
              <a href="https://youknowhrt.xyz/jedi-admin/login?username=zhaoyun&password=123456">项目预览</a>
            </div>
          </h3>
          <div class="skills">
            <span class="prefWord"></span>
            <span>技术栈：</span>
            <span class="tag">NestJS</span>
            <span class="tag">MySQL</span>
            <span class="tag">Prisma</span>
            <span class="tag">JWT</span>
            <span class="tag">Redis</span>
            <span class="tag">docker</span>
            <span style="margin: 0 .5em">/</span>
            <span class="tag">React</span>
            <span class="tag">Zustand</span>
            <span class="tag">react-router-dom</span>
            <span class="tag">react-dnd</span>
          </div>
          <p>项目概述：目前只添加了低代码编辑模块，该模块旨在通过可视化操作与少量代码编写相结合的方式，快速构建页面。涵盖前端界面设计与交互以及后端数据管理与业务逻辑处理，为用户提供高效、便捷的应用开发解决方案。</p>
          <h3><b>项目简介</b></h3>
          <ul>
            <li>
              前端：采用 React 框架构建用户界面，结合 Ant Design 组件库实现丰富且美观的 UI 展示。利用<i>Monaco Editor</i>组件实现代码编辑功能。
            </li>
            <li>
              后端：基于 NestJS 框架搭建后端服务，利用其强大的模块化架构与依赖注入机制，有效组织代码结构，提高代码可维护性与扩展性。采用<i>Prisma</i>作为数据库ORM工具，便捷地进行数据库操作与数据迁移管理。结合<i>Redis</i>进行数据缓存，优化系统性能，减轻数据库压力。
            </li>
          </ul>
          <h3><b>项目总结</b></h3>
          <ul>
            <li> 极大降低应用开发门槛，使非专业开发人员也能通过简单操作创建应用，同时为专业开发者提供代码扩展能力，满足复杂业务需求。 </li>
            <li> 通过本低代码编辑全栈项目的开发，积累了丰富的全栈开发经验，深入掌握了前端与后端开发技术以及项目架构设计与优化能力，能够独立承担复杂全栈项目的开发工作，并有效推动项目从需求分析到上线部署的整个流程。 </li>
          </ul>
        </div>
      </section>
      <section class="skillSec">
        <h2>技术栈</h2>
        <div class="gap_div"></div>
        <ul>
          <li>
            深入掌握HTML5和CSS3，熟悉各种布局技巧，包括Flex弹性布局、Grid网格布局以及传统的盒模型布局。能够熟练运用响应式设计原则和技术，快速高效地实现跨平台的Web界面开发，确保优秀的用户体验和界面适配性。
          </li>
          <li>
            熟悉Vue全家桶，包括Vue2、<i>Vue3</i>以及基于Vue的服务端渲染框架<i>Nuxt3</i>，具备多个实际项目开发经验。能够利用Vue的响应式原理和组件化开发模式，快速构建高性能的SPA（单页应用程序）；
            熟练使用<i>Next</i>进行全栈开发，了解其基于<i>React</i>的服务端渲染(SSR)和静态站点生成(SSG)特性。能够开发高性能的Web应用，并实现优化的用户体验和搜索引擎优化。
          </li>
          <li>熟悉 ES6+ 语法，熟练使用 <i>TypeScript</i>。</li>
          <li>
            熟悉<i>Sass</i>预处理器，高级CSS特性如CSS变量、动画、过渡等。通过合理运用CSS预处理器和现代CSS技术，编写更高效、易维护的样式代码，增强前端页面的交互性和视觉效果。
          </li>
          <li>
            熟练使用<i>Docker</i>容器化技术及其生态系统，包括镜像创建、容器部署以及使用docker-compose进行服务编排。具备基础的Docker应用能力，能够在容器化环境中部署和管理应用。
          </li>
          <li>熟练使用<i>NestJS</i> + <i>TypeORM</i> / <i>Prisma</i>进行后端开发。</li>
          <li>熟练使用<i>uni-app</i> 开发小程序。</li>
        </ul>
      </section>

      <section class="aboutMe">
        <h2>关于我</h2>
        <div class="gap_div"></div>
        <p>教育背景：上海第二工业大学 本科</p>
        <p>求职意向：前端开发/全栈开发</p>
        <p>自我评价：对编程有着充分的兴趣和自驱动力，保持持续学习。具备独立分析并解决问题的能力。注重团队合作，乐于沟通。</p>
      </section>
    </main>
  </div>
</template>
<script setup></script>

<style scoped lang="scss">
* {
  text-align: left;
  font-size: 14px;
  color: #333;
}
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
}

// $mainColor:rgb(197, 148, 97);
$mainColor: #1e88e5;
.cvContainer {
  width: 650px;
  min-height: 978px;
  padding: 3em;
  i {
    color: $mainColor;
    font-weight: bold;
  }
  main {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
    section {
      h2 {
        font-size: 18px;
        font-weight: bold;
        position: relative;
        margin-bottom: 0.5em;
        &:after {
          position: absolute;
          left: 0;
          bottom: -0.3em;
          content: "";
          display: block;
          height: 1px;
          width: 100%;
          background-color: #333;
        }
      }
      h3 {
        margin-top: 4px;
      }
      .skills {
        // margin-top: 4px;
        display: flex;
        flex-wrap: wrap;
        row-gap: 4px;
        .tag {
          padding: 0.1em 0.4em;
          border-radius: 4px;
          // background-color: rgba(197, 148, 97, .15);
          // background-color: #BBDEFB;
          background-color: #5c6bc0;
          // color: $mainColor;
          color: #fff;
          font-size: 12px;
          & + .tag {
            margin-left: 0.5em;
          }
        }
      }
      ul {
        margin-top: 4px;
        li {
          position: relative;
          padding-left: 1em;
          &:before {
            content: "";
            position: absolute;
            display: block;
            height: 4px;
            width: 4px;
            border-radius: 50%;
            top: calc(14px * 1.5 / 2);
            left: 0.3em;
            transform: translateY(-50%);
            background-color: $mainColor;
          }
        }
      }
    }
    .info {
      display: flex;
      flex-direction: column;
      h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 0.2em;
      }
      div {
        display: flex;
        column-gap: 1em;
        span + span {
          position: relative;
          &:before {
            content: "";
            position: absolute;
            left: -0.5em;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 1em;
            background-color: #000;
          }
        }
      }
    }
    .workExp {
      .workItem {
        h3 {
          display: flex;
          column-gap: 1em;
          align-items: center;
          margin-bottom: 8px;
          line-height: 24px;
          .company {
            font-weight: 600;
            font-size: 16px;
          }
        }
        &+.workItem{
          margin-top: 1em;
        }
      }
    }
    .projectSec {
      .projectItem {
        & + .projectItem {
          margin-top: 2em;
        }
        h3 {
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;
          .projectName {
            font-size: 16px;
            font-style: italic;
          }
          span {
            font-weight: bold;
          }
          div {
            display: flex;
            column-gap: 0.5em;
            a {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  .gap_div{
    height: 4px;
  }
}
</style>
